<template>
  <a-spin :spinning="spinning">
    <!-- 标题 -->
    <div class="modal-header">
      <div class="modal-title">
        <span>{{ l('CreateFolder') }}</span>
      </div>
    </div>
    <div class="modal-body"> <a-input :placeholder="l('CreateFolder')" v-model:value="name" /></div>
    <!-- 按钮 -->
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        <close-circle-outlined />
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="handleSubmit()">
        <save-outlined />
        {{ l('Save') }}
      </a-button>
    </div>
  </a-spin>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { SysFileServiceProxy } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  import { CloseCircleOutlined, SaveOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'create-directory',
    components: {
      CloseCircleOutlined,
      SaveOutlined,
    },
    mixins: [ModalComponentBase],
    props: {
      parentId: Number,
    },
    data() {
      return {
        spinning: false,
        name: '',
        sysFileServiceProxy: new SysFileServiceProxy(),
      };
    },
    methods: {
      /**
       * 提交数据
       */
      handleSubmit() {
        if (this.name) {
          this.spinning = true;
          this.sysFileServiceProxy
            .createDirectory(
              Object.assign({
                name: this.name,
                parentId: this.parentId,
              }),
            )
            .finally(() => {
              this.spinning = false;
            })
            .then((res) => {
              this.notify.success(this.l('SavedSuccessfully'));
              this.success(res);
            });
        } else {
          this.close();
        }
      },
    },
  });
</script>
